<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件默认行为</title>
</head>

<body>

    <a href="http://www.china.com">中华网</a>
    <a href="http://www.163.com">网易</a>
    <a href="http://www.sohu.com">搜狐</a>
    <a href="http://www.sina.com">新浪</a>

    <script type="text/javascript">
        (function() {
            // let links = document.querySelector( 'a' );
            let links = document.links;
            console.log(links, Array.isArray(links));

            let fn = function(event) {
                // 只有事件对象才有 preventDefault 函数
                event.preventDefault(); // 阻止事件的默认行为
                console.log(event.target);
                /*
                let url = event.target.getAttribute( 'href' );
                console.log( url );
                location.href = url ;
                */
            }

            Array.from(links).forEach(function(e) {
                e.addEventListener('click', fn, false);
            });
        })();
    </script>
    <hr>
    <form action="http://www.baidu.com/s">
        <div>
            <input type="text" name="wd" placeholder="请输入你要搜索的关键词">
            <input type="submit" value="百度一下">
            <button type="submit">百度一下</button>
        </div>
    </form>

    <script type="text/javascript">
        (function() {
            let btns = document.querySelectorAll('[type=submit]');

            let fn = function(event) {
                // 只有事件对象才有 preventDefault 函数
                // 阻止事件的默认行为
                event.preventDefault(); //阻止了表单的提交、重置
                let t = event.target;
                // 表单组件都可以通过 form 属性获得该组件所在的表单
                let f = t.form;
                console.log(t, f);

                // 可以通过 表单组件的 submit 函数来提交表单
                // f.submit();
                // 可以通过 表单组件的 reset 函数来重置表单
                // f.reset();
            }

            Array.from(btns).forEach(function(e) {
                e.addEventListener('click', fn, false);
            });
        })();
    </script>
</body>

</html>